<template>
  <main>
    <el-form :model="form">
      <el-form-item label="文章标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否公开" class="a">
        <el-switch v-model="form.status" />
      </el-form-item>

      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input
          v-model="form.content"
          autocomplete="off"
          style="width: 340px"
          :rows="2"
          type="textarea"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </main>
</template>

<script setup lang="ts">
import http from "@/utils/http";
import { ElMessage } from "element-plus";
import { reactive } from "vue";
const form = reactive({
  title: "",
  status: false,
  content: "",
});
const formLabelWidth = "240px";
function onSubmit() {
  http({
    url: "/posts",
    method: "post",
    data: {
      title: form.title,
      content: form.content,
      status: form.status,
    },
  }).then((r) => {
    console.log(r);
    if (r.status == 201) {
      ElMessage({
        message: "发布成功",
        type: "success",
      });
      onReset();
    }
  });
}
function onReset() {
  form.title = "";
  form.status = false;
  form.content = "";
}
</script>

<style scoped>
main {
  padding: 20px;
  width: 500px;
  margin-left: 700px;
}
.a,
.btn {
  margin-left: 170px;
}

.el-form {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-textarea {
  width: 100%;
}

.el-button {
  margin-right: 10px;
}
</style>
